<template lang="pug">
  h4 混搭 | Mashup
  mashup-gallery
  mashup-preview(:mashup="formData")

  form(@submit.prevent="handleSubmit")
    input(type="text", v-model.trim="formData.name" placeholder="name")
    select(v-model="formData.structure")
      option(disabled, value="undefined") structures
      option(v-for="structure in structures" :key="structure.id" :value="structure.value") {{structure.name}}
    button(@click.prevent="addGroup") add group

    ul.groups-form-area(v-show="formData.structure")
      li(v-for="(group, idx) in formData.groups" :key="idx")
        <!-- div.thumbnail-icon(v-html="svgIcon(group.compositionId)") -->
        select(v-model="formData.groups[idx].type")
          option(disabled, value="undefined") types
          option(v-for="type in groupTypes" :key="type.id" :value="type.value") {{type.name}}

        select(v-model="formData.groups[idx].graphicId" v-show="group.type === 'graphic'")
          option(disabled, value="undefined") graphics
          option(v-for="graphic in graphics" :key="graphic.id" :value="graphic.id") {{graphic.name}}
        select(v-model="formData.groups[idx].compositionId" v-show="group.type === 'composition'")
          option(disabled, value="undefined") compositions
          option(v-for="comp in compositions" :key="comp.id" :value="comp.id") {{comp.name}}

        button(@click="removeGroup(idx)" v-show="formData.groups.length > 1") x
        br
        label {{ formData.groups[idx].based}}
          input(type="number" step="0.01" v-model="formData.groups[idx].size" placeholder="size") 
          span A
        .coord(v-if="formData.structure === 'coordinate'")
          span left
          input(type="number" step="0.01" v-model="formData.groups[idx].left" placeholder="left") 
          br
          span top
          input(type="number" step="0.01" v-model="formData.groups[idx].top" placeholder="top") 
        .margin(v-if="!['coordinate', undefined].includes(formData.structure)")
          span L
          input(type="number" step="0.01" v-model="formData.groups[idx].marginLeft" placeholder="marginLeft") 
          span R
          input(type="number" step="0.01" v-model="formData.groups[idx].marginRight" placeholder="marginRight") 
          br
          span T
          input(type="number" step="0.01" v-model="formData.groups[idx].marginTop" placeholder="marginTop") 
          span B
          input(type="number" step="0.01" v-model="formData.groups[idx].marginBottom" placeholder="marginBottom") 
    br
    button(type="submit" :disabled="submitDisabled") create mashup
    button(@click="resetFormData") Reset
</template>

<script setup>
import { computed, ref, onMounted, watch, inject } from 'vue';
import api from '@/apis/api'
import { checkFormData } from '@/utils/js.util'
import { initialGroup, structures, groupTypes } from './mashup-constant.js'
import MashupPreview from './mashup-preview.vue'
import MashupGallery from './mashup-gallery.vue'

const mainBrandId = inject('mainBrandId')
const graphics = inject('graphics')
const compositions = inject('compositions')

const formData = ref({
  name: undefined,
  brandId: undefined,
  safePadding: 0,
  isPrivate: false,
  minimunWidth: [],
  structure: undefined,
  align: '',
  groups: [{ ...initialGroup }],
  // thumbnail: '',
})

const initialFormData = { ...formData.value, groups: [{ ...initialGroup }] }
const handleSubmit = async () => {
  await api.post('mashups', { ...formData.value })
  resetFormData()
};

const resetFormData = () => {
  for (let key in initialFormData) {
    formData.value[key] = initialFormData[key];
  }
};

const addGroup = () => {
  const based = formData.value.structure === 'horizontal' ? 'height' : 'width'
  formData.value.groups.push({ ...initialGroup, based })
}

const removeGroup = (index) => {
  formData.value.groups = formData.value.groups.filter((_, idx) => idx !== index)
}

const findChangeIndex = (oldArr, newArr) => {
  for (let i = 0; i < oldArr.length; i++) {
    if (oldArr[i] !== newArr[i]) return i;
  }
  return -1; // 如果没有发生变化，返回-1
}

watch(mainBrandId, async () => {
  formData.value.brandId = mainBrandId.value
})

watch(() => formData.value.groups.map(group => group.type), (oldTypes, newTypes) => {
  const index = findChangeIndex(oldTypes, newTypes);
  if (index === -1) return;
  formData.value.groups[index].graphicId = undefined
  formData.value.groups[index].compositionId = undefined
}, { deep: true })

watch(() => formData.value.structure, structure => {
  formData.value.align = structure === 'vertical' ? 'center' : 'middle'
  formData.value.groups.map(component => {
    component.based = structure === 'horizontal' ? 'height' : 'width'
    return component
  })
})
const submitDisabled = computed(() => {
  const needMargin = formData.value.structure !== 'coordinate'
  formData.value.groups.forEach((group, index) => {
    group.type === 'graphic' && delete formData.value.groups[index].compositionId;
    group.type === 'composition' && delete formData.value.groups[index].graphicId;
    if (needMargin) {
      delete formData.value.groups[index].left;
      delete formData.value.groups[index].top;
    } else {
      delete formData.value.groups[index].marginLeft;
      delete formData.value.groups[index].marginRight;
      delete formData.value.groups[index].marginTop;
      delete formData.value.groups[index].marginBottom;
    }
  })
  // return !checkFormData(formData.value, { debug: true })
  return !checkFormData(formData.value)
})
</script>
